<template>
  <view class="modify-phone-page">

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 新手机号 -->
      <view class="form-item">
        <text class="label">新手机号</text>
        <input class="input" type="number" v-model="phone" placeholder="请输入" maxlength="11" />
      </view>

      <!-- 人机验证 -->
      <view class="form-item" v-if="false">
        <text class="label">人机验证</text>
        <view class="captcha-wrapper">
          <input class="input captcha-input" type="text" v-model="captcha" placeholder="请输入" maxlength="4" />
          <view class="captcha-code" @click="refreshCaptcha">
            <img  v-if="captchaCodeUrl" class="gray-detail-icon" :src="captchaCodeUrl" />
          </view>
        </view>
      </view>

      <!-- 短信验证 -->
      <view class="form-item">
        <text class="label">短信验证</text>
        <view class="sms-wrapper">
          <!--  :disabled="!canGetSms || countdown > 0" -->
          <input class="input sms-input" type="number" v-model="code" placeholder="请输入" maxlength="6" />
          <button class="sms-btn" plain @click="getSmsCode">
            {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
          </button>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" :class="{ disabled: !formValid }"  @click="submitForm">
        修改
      </button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      phone: '',       // 新手机号
      captcha: '',        // 人机验证码输入
      code: '',        // 短信验证码
      countdown: 0,       // 短信倒计时
      canGetSms: false,   // 是否可以获取短信
      timer: null,        // 倒计时定时器
      captchaCodeUrl: '' // 图片验证码
    }
  },
  computed: {
    // 表单验证
    formValid() {
      return (
        /^1[3-9]\d{9}$/.test(this.phone) &&
        /^\d{6}$/.test(this.code)
      )
    }
  },
  watch: {
    // 监听手机号和人机验证码变化
    phone(val) {
      this.checkCanGetSms()
    },
    // captcha(val) {
    //   this.checkCanGetSms()
    // }
  },
  created() { },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer)
  },
  onLoad() {
    // this.getCaptcha()
  },
  methods: {
    // 刷新人机验证码
    refreshCaptcha() {
      this.getCaptcha()
      this.captcha = ''
      this.captchaCodeUrl  = ''
    },

    // 检查是否可以获取短信验证码
    checkCanGetSms() {
      this.canGetSms = (/^1[3-9]\d{9}$/.test(this.phone))
    },
    getCaptcha() {
      this.$http.get('/h5/common/getCaptcha', {}, { responseType: 'arraybuffer' }).then(res => {
        const blob = new Blob([res], { type: 'image/png' });
        const imgUrl = URL.createObjectURL(blob);
        this.captchaCodeUrl = imgUrl

      })
    },
    // 获取短信验证码
    getSmsCode() {
      if (!this.canGetSms) return
      uni.showLoading({
        title: '发送中...'
      })
      this.$http.post('/h5/common/sendSmsCode', {
        phone: this.phone,
        scene: "change_phone"
      }).then(res => {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        // 开始倒计时
        this.countdown = 60
        this.timer = setInterval(() => {
          if (this.countdown <= 0) {
            clearInterval(this.timer)
            return
          }
          this.countdown--
        }, 1000)
      })
    },

    // 提交表单
    async submitForm() {
      if (!this.formValid) {
        uni.showToast({
          title: '输入正确手机号',
          icon: 'none'
        })
        return
      }
      let params = {
        phone: this.phone,
        code: this.code,
      }
      uni.showLoading({
        title: '提交中...'
      })
      try {
        const res = await this.$http.post('/h5/user/changePhone', params)
        
        uni.hideLoading()
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      } catch (error) {

      }
    }
  }
}
</script>
<style lang="scss" scoped>
.modify-phone-page {
  padding: 20rpx 26rpx 0rpx 26rpx;
}


.form-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 36rpx 40rpx;
  margin-top: 20rpx;
  display: flex;
}

.form-item:first-child {
  margin-top: 0rpx;
}

.form-item .label {
  display: block;
  min-width: 156rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #0B1F20;
  margin-right: 46rpx;
}

.form-item .input {
  flex: 1;
  font-size: 28rpx;
  color: #999999;
}

.captcha-wrapper {
  display: flex;
  align-items: center;
}

.captcha-input {
  flex: 1;
  margin-right: 20rpx;
}

.captcha-code {
  width: 92rpx;
  height: 42rpx;
  line-height: 42rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 28rpx;
  color: #55A1FF;
  text-align: right;
  letter-spacing: 8rpx;
  padding-left: 28rpx;
  border-left: 2rpx solid #eee;
  .gray-detail-icon{
    width: 92rpx;
    height: 42rpx;

  }
}

.sms-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.sms-input {
  flex: 1;
  margin-right: 20rpx;
}

.sms-btn {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 28rpx;
  color: #FF7937;
  line-height: 42rpx;
  text-align: right;
  padding-right: 0;
}

.sms-btn[disabled] {
  color: #999;
  background-color: #f5f5f5;
}

.sms-btn[plain] {
  border: none;
}


.submit-btn {
  margin-top: 60rpx;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
  border-radius: 16rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 36rpx;
  color: #fff;
}



.submit-btn:after {
  border: none;

}

.disabled {
  background-color: #ccc;
  opacity: 0.7;
}
</style>